import React from 'react';
import { Form, Select, DatePicker, Button } from 'antd';

const { Option } = Select;
const FormItem = Form.Item;

interface IProps {
  immediately?: boolean,
  onSubmit?:(...args:any[]) => any,
  form: any
}

class Filter extends React.Component<IProps, any> {
  public componentDidMount() {
    this.init();
  }

  public handleSubmit(e?:any) {
    if (e) {
      e.preventDefault();
    }
    const { getFieldsValue } = this.props.form;
    const formData = getFieldsValue();
    if (this.props.onSubmit) {
      this.props.onSubmit(formData);
    }
  }

  public render() {
    const { getFieldDecorator } = this.props.form;
    const style = { width: 120, marginRight: 30 };

    return (
      <Form layout="inline" style={{ padding: 31 }} onSubmit={(e) => this.handleSubmit(e)} >
        <FormItem label="产品：">
          {getFieldDecorator('app', { initialValue: 'app*' })(
            <Select style={style} placeholder="Please select a country">
              <Option value="app*">ECF服务</Option>
              <Option value="object*">对象服务</Option>
              <Option value="pas*">EAF服务</Option>
              <Option value="tsdb*">TSDB服务</Option>
            </Select>)}
        </FormItem>
        <FormItem label="开始时间：">
          {getFieldDecorator('beginTime')(
            <DatePicker style={style} showTime={true} />
          )}
        </FormItem>
        <FormItem>
          <Button type="primary" htmlType="submit">查询</Button>
        </FormItem>
      </Form>
    );
  }

  private async init() {
    if (this.props.immediately) {
      this.handleSubmit();
    }
  }
}

export default Form.create()(Filter);